<template>
  <div class="app-container" style="padding-top: 5px;">
    <el-form :model="queryParams" ref="queryForm" :inline="true" label-width="68px" style="height: 45px;">

      <el-form-item label="项目标段" prop="institutionCode">
        <el-select
          v-model="queryParams.institutionCode"
          placeholder="请选择"
          size="small"
          style="width: 240px" @change="handleBidChange"
        >
          <el-option-group
            v-for="group in bidOptions"
            :key="group.name"
            :label="group.name">
            <el-option
              v-for="item in group.bids"
              :key="item.code"
              :label="item.name"
              :value="item.code">
            </el-option>
          </el-option-group>
        </el-select>
      </el-form-item>

      <el-form-item label="期　　次" prop="periodName">
        <el-select v-model="queryParams.periodName" placeholder="请选择" @change="handlePeriodChange">
          <el-option
            v-for="item in periodOptions"
            :key="item.periodName"
            :label="item.periodName"
            :value="item.periodName">
          </el-option>
        </el-select>
      </el-form-item>

      <el-form-item label="用　　户" prop="user">
        <el-select v-model="queryParams.user" placeholder="请选择" @change="handleUserChange">
          <el-option
            v-for="item in userOptions"
            :key="item.user"
            :label="item.name"
            :value="item.user">
          </el-option>
        </el-select>
      </el-form-item>

    </el-form>

    <i-frame :src="reportUrl"/>

  </div>
</template>

<script>

import { initView } from "@/api/engineering/report";
import { dropDownReportPeriodList } from "@/api/project/period";
import iFrame from "@/components/iFrame/index";
import {dropDownReportUserList, getSummaryRecordIsApprove} from "@/api/engineering/summary";

export default {
  name: "ReportView",
  components: { iFrame },
  data() {
    return {
      // 查询参数
      queryParams: {
        reportUrl: null,
        institutionCode: null,
        periodName: null,
        user: null
      },
      // 标段下拉框
      bidOptions:[],
      // 工期下拉框
      periodOptions: [],
      // 用户下拉框
      userOptions: [],
      reportUrl: ""
    };
  },
  created() {
    document.title = this.$route.query.reportName;
    this.queryParams.reportUrl = this.$route.query.reportUrl;
    this.queryParams.institutionCode = this.$route.query.institutionCode;
    this.queryParams.periodName = this.$route.query.periodName;
    this.queryParams.user = this.$route.query.user;
    this.init();
  },
  methods: {
    /** 初始化标段下拉框 */
    init() {
      initView({
        institutionCode: this.queryParams.institutionCode,
        periodName: this.queryParams.periodName,
        user: this.queryParams.user,
        reportType: this.reportType}).then(response => {
        this.bidOptions = response.bids;
        this.periodOptions = response.periods;
        this.userOptions = response.users;
        this.loadReport();
      });
    },
    /** 获取工期下拉框 */
    getPeriodList() {
      dropDownReportPeriodList({institutionCode: this.queryParams.institutionCode}).then(response => {
        this.periodOptions = response.periods;
        // this.queryParams.periodName = response.periodName;
        // this.getUserList();
      });
    },
    // 获取用户下拉框
    getUserList() {
      dropDownReportUserList({institutionCode: this.queryParams.institutionCode, periodName: this.queryParams.periodName}).then(response => {
        this.userOptions = response.users;
        // this.queryParams.user = response.user;
      });
    },
    // 标段下拉框发生变化
    handleBidChange() {
      this.queryParams.periodName = null;
      this.periodOptions = [];
      this.queryParams.user = null;
      this.userOptions = [];
      this.getPeriodList();
      this.loadReport();
    },
    // 工期下拉框发生变化
    handlePeriodChange() {
      this.queryParams.user = null;
      this.userOptions = [];
      this.getUserList();
      this.loadReport();
    },
    // 用户下拉框发生变化
    handleUserChange() {
      this.loadReport();
    },
    // 加载报表
    loadReport() {
      console.log("机构编号：" + this.queryParams.institutionCode);
      console.log("工期：" + this.queryParams.periodName);
      console.log("用户：" + this.queryParams.user);
      let url = "";
      if (this.queryParams.institutionCode == undefined || this.queryParams.periodName == undefined || this.queryParams.user == undefined) {
        this.reportUrl = url;
      } else {
        // 加载前获取是否批复
        getSummaryRecordIsApprove({
          institutionCode: this.queryParams.institutionCode,
          periodName: this.queryParams.periodName,
          user: this.queryParams.user}).then(response => {
          let isApprove = response.isApprove;
          url = this.queryParams.reportUrl
            + "&institutionCode=" + this.queryParams.institutionCode
            + "&periodName=" + this.queryParams.periodName
            + "&user=" + this.queryParams.user
            + "&isApprove=" + isApprove;
          console.log("报表地址：" + url);
          this.reportUrl = url;
        });
      }

    }

  }
};
</script>
